<template>
  <el-button type="primary" plain @click="open(null)"> 添加</el-button>

  <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="productName" label="商品名称" />
      <el-table-column prop="productionBatch" label="生产批次" />
      <el-table-column prop="shelfLife" label="保质期(天)" />
      <el-table-column prop="licenseNumber" label="生产许可证" />
      <el-table-column prop="enterprise" label="生产企业" />
      <el-table-column prop="creator" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updator" label="修改人" />
      <el-table-column label="操作" width="200">
          <template v-slot="scoped">
              <el-button type="warning" @click="open(scoped.row)">修改</el-button>
              <el-button type="danger" @click="shanchu(scoped.row.id)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
  <!-- 分页 -->
  <table>
    <tr>
      <td>
          <el-pagination v-model:current-page="cha.PageIndex" v-model:page-size="cha.PageSize"
              :page-sizes="[2, 5, 7, 9]" prev-text="上一页" next-text="下一页" :background="true"
              layout="total, sizes, slot" :total="cha.TotalCount" @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
              <span>，共{{ cha.TotalCount }}条数据，每页显示{{ cha.PageIndex }}/{{ cha.TotalPage }}页</span>
          </el-pagination>
      </td>
      <td>
          <el-pagination v-model:current-page="cha.PageIndex" v-model:page-size="cha.PageSize"
              :page-sizes="[2, 5, 7, 9]" prev-text="上一页" next-text="下一页" :background="true"
              layout="  prev, pager, next, slot" :total="cha.TotalCount" @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
              <button class="btn-prev" :disabled="cha.PageIndex == 1" @click="handleCurrentChange(1)">首页</button>
          </el-pagination>
      </td>
      <td>
          <el-pagination v-model:current-page="cha.PageIndex" v-model:page-size="cha.PageSize"
              :page-sizes="[2, 5, 7, 9]" prev-text="上一页" next-text="下一页" :background="true" layout="slot, jumper"
              :total="cha.TotalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              <button class="btn-prev" :disabled="cha.PageIndex == cha.TotalPage"
                  @click="handleCurrentChange(cha.TotalPage)">尾页</button>
          </el-pagination>
      </td>
    </tr>
      
  </table>

  <!-- 添加-编辑 -->
  <el-dialog v-model="logic.isopen" :title="logic.istital" width="500">
      <el-form :model="form">
          <el-form-item label="商品名称">
              <el-input v-model="form.productName" />
          </el-form-item>
          <el-form-item label="商品批次">
              <el-input v-model="form.productionBatch" />
          </el-form-item>
          <el-form-item label="保质期(天)">
              <el-input v-model="form.shelfLife" />
          </el-form-item>
          <el-form-item label="生产许可证号">
              <el-input v-model="form.licenseNumber" />
          </el-form-item>
          <el-form-item label="生产企业">
              <el-input v-model="form.enterprise" />
          </el-form-item>
          <el-form-item label="封面图">
              <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                      <Plus />
                  </el-icon>
              </el-upload>
          </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button @click="logic.isopen == false">取消</el-button>
              <el-button type="primary" @click="queding">确定 </el-button>
          </div>
      </template>
  </el-dialog>

</template>
<script lang="ts" setup>
// import { useUserStore } from '@/stores/user';
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus'
const useStore = useCounterStore();
const router = useRouter()
// const store = useUserStore()

//#region  添加编辑
const logic = reactive({
  isopen: false,
  istital: "添加",
  isAsscess: false
})
const form = reactive({
  id: "",//主键
  productName: "",//商品名称
  productionBatch: "",//生产批次
  shelfLife: "",//保质期
  licenseNumber: "",//生产许可证
  enterprise: "", //生产企业
 
  url: "", //封面图片
})
const open = (row: any) => {
  if (row == null) {
      logic.isopen = true
      logic.istital = "添加"
      logic.isAsscess = true
      form.id = '',
      form.productName = '',
      form.productionBatch ='',
      form.shelfLife = '',
      form.licenseNumber = '',
      form.enterprise = '',
      form.url = ''
  } else {
      logic.isopen = true
      logic.istital = "更新"
      logic.isAsscess = false
      form.id = row.id
      form.productName = row.productName
      form.productionBatch = row.productionBatch
      form.shelfLife = row.shelfLife
      form.licenseNumber = row.licenseNumber
      form.enterprise = row.enterprise
      form.url = row.url
  }
}

const queding = () => {
  if (logic.isAsscess) {
      axios.post("https://localhost:7063/api/Product/ProductAdd", form)
          .then(res => {
              if (res.data.code == 200) {
                  ElMessage.success("添加成功")
                  logic.isopen = false
                  xianshi()
              } else {
                  ElMessage.error("添加失败")
              }
          })
  }
   else
    {
      axios.put("https://localhost:7063/api/Product/ProductUpdate", form)
          .then(res => {
              if (res.data.code == 200) {
                  ElMessage.success("更新成功")
                  logic.isopen = false
                  xianshi()
              } else {
                  ElMessage.error("更新失败")
              }
          })
  }
}

//#endregion

//#region  删除
const shanchu = (row:any) => {
  ElMessageBox.confirm(
      '确定要删除吗?',
      'Warning',
      {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
      }
  )
      .then(() => {
          axios.post("https://localhost:7063/api/Product/ProductDelete?id"+row.id )
              .then(res => {
                  if (res.data.code === 200) {
                      ElMessage.success("删除成功")
                      logic.isopen = false
                      xianshi()
                  } else {
                      ElMessage.error("删除失败")
                  }
              })
      })
      
}
//#endregion

//#region 图片
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('Avatar picture must be JPG format!')
      return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('Avatar picture size can not exceed 2MB!')
      return false
  }
  return true
}
//#endregion

//#region  分页
const tableData = ref([])
const cha = reactive({
  PageIndex: 1,
  PageSize: 5,
  TotalCount: "",
  TotalPage: "",
})
const xianshi = () => {
  axios.get("https://localhost:7063/api/Product/ProductList", {
      params: {
          pageindex: cha.PageIndex,
          pagesize: cha.PageSize,
      }
  })
      .then(res => {
          tableData.value = res.data.data.data
          console.log(res.data.data.data);

          cha.TotalCount = res.data.data.totalCount
          cha.TotalPage = res.data.data.totalPage
      })
}
const handleSizeChange = (val: any) => {
  cha.PageSize = val;
  xianshi()
}
const handleCurrentChange = (val: any) => {
  cha.PageIndex = val;
  xianshi()
}
onMounted(() => {
  xianshi()
})
//#endregion

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>